<template>
  <!--选择条件弹窗-->
  <!--  消费规则设置-->
  <el-dialog title="条件类型" :visible.sync="$attrs.visableIf" @close="handleCloseDialog" :close-on-click-modal="false" :close-on-press-escape="false" append-to-body width="800px">

    <el-form ref="form" :rules="rules" :model="form" label-width="120px">
      <el-form-item label="类型" prop="type">
        <el-radio-group v-model="form.type" class="launchType">
          <el-radio v-for="(item,index) in selectTypeList" :key="index" :label="Number(item.value)">{{ item.label }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否限定时间" prop="selectType" v-if="form.type !=0">
        <el-radio-group v-model="form.selectType" class="launchType">
          <el-radio v-for="(item,index) in timeTypeList" :key="index" :label="Number(item.value)">{{ item.label }}</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="消费规则" prop="selectType">
        <el-form-item prop="time" v-if="form.selectType==1 && form.type !=0">
          <el-input placeholder="请输入天数" size="small" v-model="form.time" style="width: 100px; margin-right: 10px">
            <template slot="append">天</template>
          </el-input>
          内
        </el-form-item>
        <el-form-item prop="dateRange" v-if="form.selectType==2 && form.type!=0">
          <el-date-picker
            size="small"
            v-model="form.dateRange"
            style="width: 240px"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <div class="rang-big">
          <el-form-item prop="selectType" label-width="0px">
            <el-input placeholder="请输入内容" v-model="form.minMumber" size="small" style="width: 100px;">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
          <el-form-item label-width="0px" prop="minSymbol">
            <el-select v-model="form.minSymbol" placeholder="符号" size="small" style="width: 100px;">
              <el-option
                v-for="item in symbolTypeList"
                :key="Number(item.value)"
                :label="item.label"
                :value="Number(item.value)">
              </el-option>
            </el-select>
          </el-form-item>
          <span style="margin: 0px 10px;">消费金额</span>
          <el-form-item label-width="0px" prop="maxSymbol">
            <el-select v-model="form.maxSymbol" placeholder="符号" size="small" style="width: 100px;">
              <el-option
                v-for="item in symbolTypeList"
                :key="Number(item.value)"
                :label="item.label"
                :value="Number(item.value)">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label-width="0px" prop="maxMumber">
            <el-input placeholder="请输入内容" v-model="form.maxMumber" size="small" style="width: 100px;">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
        </div>
        <div class="tips">
          <span v-if="form.type==1">近{{ this.form.time }}天，</span>
          <span v-if="form.type==2&&form.dateRange && form.dateRange.length>0 ">{{ form.dateRange[0] }}~{{ form.dateRange[1] }}</span>
          {{ form.type | getNameById(selectTypeList) }}：<span v-if="form.minSymbol==0">大于</span><span v-else>大于等于</span>{{ form.minMumber }} <span v-if="form.type==2">元</span><span v-if="form.type==1">次</span>，<span v-if="form.maxSymbol==0">小于</span><span v-else>小于等于</span>{{ form.maxMumber }}<span v-if="form.type==2">元</span><span v-if="form.type==1">次</span>
        </div>
      </el-form-item>


    </el-form>
    <div class="footer-btn">
      <el-button type="primary" @click="handleCloseDialog">取消</el-button>
      <el-button @click="submitForm('form')">提交</el-button>
    </div>
  </el-dialog>
</template>

<script>
// import { reqPlanCheckNotPass } from '@/api/advergroupPlanMgt/index'
import MultipleSelect from "@/views/components/multipleSelect.vue";

export default {
  name: 'chooseCondition',
  components: {
    MultipleSelect
  },
  data() {
    return {
      form: {
        type: 0,// 类型
        selectType: 0,//时间类型
        time: 3,
        startTime: null,
        endTime: null,
        dateRange: [],
        minSymbol: 0,
        minMumber: 0,
        maxSymbol: 0,
        maxMumber: 0,
      },
      symbolTypeList: [
        {value: 0, label: '＜',},
        {value: 1, label: '≤',},
      ],
      selectTypeList: [
        {value: 0, label: '消费间隔',},
        {value: 1, label: '消费频次',},
        {value: 2, label: '消费金额',}
      ],
      timeTypeList: [
        {value: 0, label: '不限时间',},
        {value: 1, label: '按近几天',},
        {value: 2, label: '按固定时间',}
      ],
      rules: {
        'type': [
          {required: true, message: '请选择类型', trigger: 'change'}
        ],
        'selectType': [
          {required: true, message: '是否限定时间', trigger: 'change'}
        ],
        'minMumber': [
          {required: true, message: '填写最小值', trigger: 'change'}
        ],
        'maxMumber': [
          {required: true, message: '填写最大值', trigger: 'change'}
        ],
        'minSymbol': [
          {required: true, message: '请选择符号', trigger: 'change'}
        ],
        'maxSymbol': [
          {required: true, message: '请选择符号', trigger: 'change'}
        ]
      }
    }
  },
  created() {
  },
  mounted() {
  },
  watch: {},
  filters: {
    getNameById(val, list) {
      let name = '—'
      list.forEach(item => {
        if (item.value == val) {
          name = item.label;
        }
      });
      return name;
    }
  },
  methods: {
    submitForm() {
      // this.$modal.confirm(`确定要驳回吗？`).then(() => {
      //   // reqPlanCheckNotPass(this.form).then(res => {
      //   //   this.$modal.selectTypeSuccess('提交成功！');
      //   //   this.handleCloseDialog();
      //   //   this.$emit('closeParentDialog');
      //   // })
      //
      // })
    },
    handleCloseDialog() {
      this.$emit('update:visableIf', false);
      this.$emit('handleQuery');
      this.$emit('getFriendInfo', {})//把值传给父级
    }
  }
}
</script>

<style scoped lang="scss">
.item-big {
  display: flex;
  align-items: center;

  .select-left {
    width: 120px;
    margin-right: 10px;
  }

  .select-right {
    flex: 1;
  }
}

.footer-btn {
  display: flex;
  justify-content: flex-end;
}

.rang-big {
  display: flex;
  align-items: center;

  ::v-deep .el-form-item {
    display: flex;
    align-items: center;

    .el-form-item__content {
      display: flex;
      align-items: center;

      .el-select {
        margin: 0px 5px;
      }
    }
  }
}

::v-deep .el-input-group__append, ::v-deep .el-input-group__prepend {
  padding: 0px 10px;
}

.tips {
  width: 100%;
  color: #888;
}
</style>
